<template>
    <div>
        <Card>
            <Row>
                <Button type="primary" icon="md-add" size="large" @click="appearModal(1)">物资入库</Button>
                <Button type="primary" icon="md-add" size="large" @click="appearModal(2)" style="margin:5px 5px">采购入库</Button>
            </Row>
            <Row>
                <el-table stripe border :data="tableData" @expand-change="queryDtlInfo">
                    <template slot="empty">暂无数据</template>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table :data="dtlInfoList" border style="width: 100%">
                                <el-table-column label="物资类别" prop="materialClass"></el-table-column>
                                <el-table-column label="物资编号" prop="materialCode"></el-table-column>
                                <el-table-column label="物资名称" prop="materialName"></el-table-column>
                                <el-table-column label="单位" prop="materialUnit"></el-table-column>
                                <el-table-column label="规格" prop="materialSpecifications"></el-table-column>
                                <el-table-column label="系统单价" prop="purchasePrice"></el-table-column>
                                <el-table-column label="入库数量" prop="changingNumber"></el-table-column>
                                <el-table-column label="供应商" prop="supplierName"></el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column label="入库仓库" prop="warehouseName"></el-table-column>
                    <el-table-column label="入库时间" prop="warehousingTime"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                </el-table>
                <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                      show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
                </Page>
            </Row>
        </Card>

        <!--物资入库-->
        <Modal v-model="materialVisible" :title="modalTitle" width="70%">
            <el-form :model="materialInStock" :rules="rules" :inline="true" ref="materialInStockForm">
                <el-form-item label="入库仓库" prop="warehouseValue">
                    <el-select value-key="id" v-model="materialInStock.warehouseValue">
                        <el-option v-for="item in warehouseList" :key="item.id" :value="item" :label="item.warehouseName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入库时间" prop="warehousingTime">
                    <el-date-picker v-model="materialInStock.warehousingTime" type="datetime"></el-date-picker>
                </el-form-item>
                <el-form-item label="入库备注" width="200">
                    <el-input v-model="materialInStock.remark"></el-input>
                </el-form-item>
                <el-form-item label="物资详情">
                    <el-table  border :data="materialInStock.dtlList" style="width: 100%">
                        <el-table-column label="" width="50">
                            <template slot-scope="scope">
                                <i class="el-icon-remove" @click="delMaterialData(scope.$index)"></i>
                            </template>
                        </el-table-column>
                        <el-table-column prop="className" label="物资类别" width="120"></el-table-column>
                        <el-table-column prop="code" label="物资编号" width="120"></el-table-column>
                        <el-table-column prop="name" label="物资名称" width="100"></el-table-column>
                        <el-table-column prop="unit" label="单位" width="80"></el-table-column>
                        <el-table-column prop="specifications" label="规格" width="80"></el-table-column>
                        <el-table-column label="入库数量" width="120">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.changingNumber" placeholder="请输入数量"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="supplierName" label="供应商" width="180">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.supplierName" placeholder="请选择" clearable filterable>
                                    <el-option v-for="item in supplierList" :key="item.id" :value="item.supplierName" :label="item.supplierName">

                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="text" @click="addMaterialData">+ 添加</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <Button type="primary" @click="submitUpload('materialInStockForm')">确定</Button>
            </div>
        </Modal>
        <!--采购入库-->
        <Modal v-model="purchaseVisible" :title="modalTitle" width="70%">
            <el-form :model="purchaseInStock" :rules="rules" :inline="true" ref="purchaseInStockForm">
                <el-form-item label="入库仓库" prop="warehouseValue">
                    <el-select value-key="id" v-model="purchaseInStock.warehouseValue">
                        <el-option v-for="item in warehouseList" :key="item.id" :value="item" :label="item.warehouseName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入库时间" prop="warehousingTime">
                    <el-date-picker v-model="purchaseInStock.warehousingTime" type="datetime"></el-date-picker>
                </el-form-item>
                <el-form-item label="入库备注" width="200">
                    <el-input v-model="purchaseInStock.remark"></el-input>
                </el-form-item>
                <el-form-item label="订单号" width="200">
                    <el-input @blur="orderNoChange" placeholder="请输入物资申请订单号"></el-input>
                </el-form-item>
                <el-form-item label="物资详情">
                    <el-table  border :data="purchaseInStock.showDtlList" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column prop="materialClass" label="物资类别" width="120"></el-table-column>
                        <el-table-column prop="materialCode" label="物资编号" width="120"></el-table-column>
                        <el-table-column prop="materialName" label="物资名称" width="100"></el-table-column>
                        <el-table-column prop="materialUnit" label="单位" width="80"></el-table-column>
                        <el-table-column prop="materialSpecifications" label="规格" width="80"></el-table-column>
                        <el-table-column prop="number" label="订单数量" width="80"></el-table-column>
                        <el-table-column label="入库数量" width="120">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.changingNumber" placeholder="请输入数量"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="supplierName" label="供应商" width="180">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.supplierName" placeholder="请选择" clearable filterable>
                                    <el-option v-for="item in supplierList" :key="item.id" :value="item.supplierName" :label="item.supplierName">

                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="入库状态" width="120">
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == 1" style="color:green">未入库</p>
                                <p v-if="scope.row.status == 2" style="color:blue">已入库</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <Button type="primary" @click="submitUpload('purchaseInStockForm')">确定</Button>
            </div>
        </Modal>
        <!--物资选择-->
        <Modal v-model="materialSelectVisible">
            <el-select value-key="id" v-model="materialValue" @change="materialChange" clearable filterable>
                <el-option v-for="item in materialList" :key="item.id" :value="item" :label="item.name">

                </el-option>
            </el-select>
        </Modal>
    </div>
</template>

<script>
    import moment from "moment";
    export default {
        data(){
            return{
                pageNum:1,
                pageSize:10,
                pageTotal:0,
                modalTitle:"",
                materialVisible:false,
                purchaseVisible:false,
                materialSelectVisible:false,

                warehouseList:[],
                supplierList:[],
                materialList:[],
                tableData:[],
                dtlInfoList:[],

                materialValue:{},
                materialInStock:{
                    dtlList:[],
                },
                purchaseInStock:{
                    dtlList:[],
                },
                rules: {
                    warehouseValue: [
                        {
                            required: true,
                            message: "请选择入库仓库",
                        }
                    ],
                    warehousingTime:[
                        {
                            required: true,
                            message: "请选择入库时间",
                        }
                    ],
                },
            }
        },

        created:function () {
            this.getWarehouse();
            this.getSuppliers();
            this.getMaterials();
            this.loadData();
        },

        methods:{
            loadData(){
                this.getRequest("/api/material/record/records?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&type=1").then(resp=>{
                    if(resp.code=20000){
                        this.tableData=resp.data.list;
                        this.pageTotal=resp.data.total;
                    }
                });
            },
            queryDtlInfo(row,expandedRows){
                this.dtlInfoList=[];
                if (expandedRows.length > 1) {
                    expandedRows.shift();
                    this.getRequest("/api/material/record/details?code="+row.code).then(resp => {
                        if (resp.code == 20000) {
                            this.dtlInfoList = resp.data;
                        }
                    });
                } else {
                    this.getRequest("/api/material/record/details?code="+row.code).then(resp => {
                        if (resp.code == 20000) {
                            this.dtlInfoList = resp.data;
                        }
                    });
                }
            },
            getWarehouse() {
                this.getRequest("/api/whsc/warehouses?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(resp => {
                    if (resp.code == 20000) {
                        this.warehouseList = resp.data.list;
                    }
                });
            },
            getSuppliers(){
                this.getRequest("/api/spsc/suppliers?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(resp => {
                    if (resp.code == 20000) {
                        this.supplierList = resp.data.list;
                    }
                });
            },
            getMaterials() {
                this.getRequest("/api/msc/materials?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(resp => {
                    if (resp.code == 20000) {
                        this.materialList = resp.data.list;
                    }
                });
            },
            appearModal(type){
                if (type==1){
                    this.modalTitle="物资入库";
                    this.materialVisible=true;
                }else if (type==2){
                    this.modalTitle="采购详情";
                    this.purchaseVisible=true;
                }
            },
            addMaterialData() {
                this.materialSelectVisible = true;
            },
            materialChange(obj){
                this.materialInStock.dtlList.push({
                    materialId:obj.id,
                    className:obj.className,
                    code:obj.code,
                    name:obj.name,
                    unit:obj.unit,
                    specifications:obj.specifications,
                    supplierName:"",
                });
                this.materialSelectVisible=false;
            },
            delMaterialData: function (index) {
                this.materialInStock.dtlList.splice(index, 1);
            },
            orderNoChange(event){
                this.getRequest("/api/prc/details?orderNumber="+event.srcElement.value+"&status=1").then(resp=>{
                    this.purchaseInStock.showDtlList=resp.data;
                    if (this.modalTitle="采购入库") {
                        this.modalTitle="采购详情";
                    }else {
                        this.modalTitle="采购入库";
                    }

                })
            },
            handleSelectionChange(selection){
                this.purchaseInStock.dtlList=selection;
            },
            submitUpload(form){
                if (form=="materialInStockForm") {
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            if (this.materialInStock.dtlList.length==0){
                                this.$Message.error("请添加物资");
                                return;
                            }else {
                                this.materialInStock.warehouseId = this.materialInStock.warehouseValue.id;
                                this.materialInStock.warehouseName = this.materialInStock.warehouseValue.warehouseName;
                                this.materialInStock.warehousingTime=moment(this.materialInStock.warehousingTime).format("YYYY-MM-DD HH:mm:ss");
                                this.postJsonRequest("/api/material/record/inRecord",this.materialInStock).then(resp=>{
                                    if (resp.code==20000){
                                        this.materialVisible=false;
                                        this.materialInStock=[],
                                        this.loadData();
                                    }
                                });
                            }
                        }
                    });
                }else if (form=="purchaseInStockForm"){
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            if (this.purchaseInStock.dtlList.length==0){
                                this.$Message.error("请选择物资");
                                return;
                            }else {
                                if (this.purchaseInStock.warehousingTime){
                                    this.purchaseInStock.warehousingTime=moment(this.purchaseInStock.warehousingTime).format("YYYY-MM-DD HH:mm:ss");
                                }
                                let param={};
                                param.warehouseId=this.purchaseInStock.warehouseValue.id;
                                param.warehouseName=this.purchaseInStock.warehouseValue.warehouseName;
                                param.warehousingTime=this.purchaseInStock.warehousingTime;
                                param.remark=this.purchaseInStock.remark;
                                param.dtlList=this.purchaseInStock.dtlList;
                                this.postJsonRequest("/api/material/record/inRecord",param).then(resp=>{
                                    if (resp.code==20000){
                                        this.purchaseVisible=false;
                                        this.purchaseInStock=[],
                                        this.loadData();
                                    }
                                });
                            }
                        }
                    });
                }
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        },
    }
</script>
